<!doctype html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端,webpack,react,karma,coverage," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="前言在上一篇文章中，葱哥从零开始创建了一个react的boilerplate，并使用webpack进行build，使其支持ES6，同时使用karma＋mocha等进行单元测试。虽然单元测试有了，但是代码中哪些写了测试，哪些没写呢？本文就将在上一篇文章的基础上为其增加生成代码覆盖率的功能。
代码本文的最终代码可以在react_boilerplate_v8中查看。
准备工作react boilerpl">
<meta property="og:type" content="article">
<meta property="og:title" content="手把手教你为React Boilerplate添加测试代码覆盖率报告">
<meta property="og:url" content="http://jiji262.github.io/2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/index.html">
<meta property="og:site_name" content="令狐葱@前端笔记">
<meta property="og:description" content="前言在上一篇文章中，葱哥从零开始创建了一个react的boilerplate，并使用webpack进行build，使其支持ES6，同时使用karma＋mocha等进行单元测试。虽然单元测试有了，但是代码中哪些写了测试，哪些没写呢？本文就将在上一篇文章的基础上为其增加生成代码覆盖率的功能。
代码本文的最终代码可以在react_boilerplate_v8中查看。
准备工作react boilerpl">
<meta property="og:image" content="http://7xsxyo.com1.z0.glb.clouddn.com/coverage1.png">
<meta property="og:image" content="http://7xsxyo.com1.z0.glb.clouddn.com/coverage2.png">
<meta property="og:updated_time" content="2016-08-04T09:03:26.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="手把手教你为React Boilerplate添加测试代码覆盖率报告">
<meta name="twitter:description" content="前言在上一篇文章中，葱哥从零开始创建了一个react的boilerplate，并使用webpack进行build，使其支持ES6，同时使用karma＋mocha等进行单元测试。虽然单元测试有了，但是代码中哪些写了测试，哪些没写呢？本文就将在上一篇文章的基础上为其增加生成代码覆盖率的功能。
代码本文的最终代码可以在react_boilerplate_v8中查看。
准备工作react boilerpl">
<meta name="twitter:image" content="http://7xsxyo.com1.z0.glb.clouddn.com/coverage1.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"post","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://jiji262.github.io/2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/"/>





  <title> 手把手教你为React Boilerplate添加测试代码覆盖率报告 | 令狐葱@前端笔记 </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0fd825270d7f51597f963010828c65b8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>










  
  
    
  

  <div class="container one-collumn sidebar-position-post page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">令狐葱@前端笔记</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
    
      <p class="site-subtitle"></p>
    
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://jiji262.github.io/2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="令狐葱">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/images/avatar.gif">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="令狐葱@前端笔记">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="令狐葱@前端笔记" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                手把手教你为React Boilerplate添加测试代码覆盖率报告
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2016-07-26T20:10:00+08:00">
                2016-07-26
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在<a href="http://jiji262.github.io/2016/04/29/create-your-own-react-boilerplate/">上一篇文章</a>中，葱哥从零开始创建了一个react的boilerplate，并使用webpack进行build，使其支持ES6，同时使用karma＋mocha等进行单元测试。虽然单元测试有了，但是代码中哪些写了测试，哪些没写呢？本文就将在<a href="http://jiji262.github.io/2016/04/29/create-your-own-react-boilerplate/">上一篇文章</a>的基础上为其增加生成代码覆盖率的功能。</p>
<h3 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h3><p>本文的最终代码可以在<a href="https://github.com/jiji262/react_boilerplate/tree/master/_tutorial_/react_boilerplate_v8" target="_blank" rel="external">react_boilerplate_v8</a>中查看。</p>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><h3 id="react-boilerplate代码"><a href="#react-boilerplate代码" class="headerlink" title="react boilerplate代码"></a>react boilerplate代码</h3><p>首先拿到<a href="http://jiji262.github.io/2016/04/29/create-your-own-react-boilerplate/">上一篇文章</a>的代码：</p>
<figure class="highlight vala"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="meta"># git clone https://github.com/jiji262/react_boilerplate.git</span></div><div class="line"></div><div class="line"><span class="meta"># cd _tutorial_/react_boilerplate_v6</span></div></pre></td></tr></table></figure>
<p>在正式开始之前，我们将对之前的代码做一些简单的修改，<code>app</code>目录用于存放源代码，<code>test</code>目录用于存放测试文件，文件结构如下：</p>
<figure class="highlight gherkin"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">|<span class="string">____app</span></div><div class="line">|<span class="string"> </span>|____components</div><div class="line">|<span class="string"> </span>|<span class="string"> </span>|<span class="string">____FooBar.js</span></div><div class="line">|<span class="string"> </span>|<span class="string"> </span>|<span class="string">____HelloWorld.js</span></div><div class="line">|<span class="string"> </span>|<span class="string">____index.js</span></div><div class="line">|____test</div><div class="line">|<span class="string"> </span>|____components</div><div class="line">|<span class="string"> </span>|<span class="string"> </span>|<span class="string">____HelloWorld-spec.js</span></div><div class="line">|<span class="string"> </span>|<span class="string">____index.spec.js</span></div></pre></td></tr></table></figure>
<p>其中<code>components</code>目录用于存放React组件，其中有两个小的示例。具体代码可以参考<a href="https://github.com/jiji262/react_boilerplate/tree/master/_tutorial_/react_boilerplate_v7" target="_blank" rel="external">Github</a>.</p>
<h3 id="build和test"><a href="#build和test" class="headerlink" title="build和test"></a>build和test</h3><p>现在在我们的项目目录下可以通过如下命令来运行和测试代码了。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># npm run dev # 开发环境，运行后使用http://localhost:3000/看到效果</span></div><div class="line"></div><div class="line"><span class="comment"># npm build  # 生产环境编译</span></div><div class="line"></div><div class="line"><span class="comment"># npm run test # 使用karma+mocha进行测试</span></div></pre></td></tr></table></figure>
<a id="more"></a>
<h2 id="测试代码覆盖率"><a href="#测试代码覆盖率" class="headerlink" title="测试代码覆盖率"></a>测试代码覆盖率</h2><h3 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h3><p>除了我们已经安装好的<code>karma-webpack</code>、<code>karma-sourcemap-loader</code>等插件外，我们要实现测试代码的覆盖率检测，还需要安装如下插件：<br><figure class="highlight q"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install karma-coverage --<span class="built_in">save</span>-<span class="built_in">dev</span></div></pre></td></tr></table></figure></p>
<p>要支持React的测试代码覆盖率，还需要：<br><figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install </span><span class="keyword">babel-istanbul-loader </span>--save-dev</div></pre></td></tr></table></figure></p>
<h3 id="修改karma配置文件"><a href="#修改karma配置文件" class="headerlink" title="修改karma配置文件"></a>修改karma配置文件</h3><p>在<code>karma.config.js</code>文件中，添加对coverage插件的支持，修改后代码如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</div><div class="line"><span class="keyword">var</span> webpackConfig = <span class="built_in">require</span>(<span class="string">'./webpack.config'</span>);</div><div class="line">webpackConfig.devtool = <span class="string">'inline-source-map'</span>;</div><div class="line">webpackConfig.module.preLoaders = [</div><div class="line">    <span class="comment">//transpile and instrument only testing sources with babel-istanbul</span></div><div class="line">    &#123;</div><div class="line">      test: <span class="regexp">/\.js$/</span>,</div><div class="line">      include: path.resolve(<span class="string">'app/'</span>),</div><div class="line">      loader: <span class="string">'babel-istanbul'</span>,</div><div class="line">      query: &#123;</div><div class="line">        cacheDirectory: <span class="literal">true</span></div><div class="line">          <span class="comment">// see below for possible options</span></div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">  ];</div><div class="line"></div><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">config</span>) </span>&#123;</div><div class="line">  config.set(&#123;</div><div class="line">    browsers: [<span class="string">'Chrome'</span>],</div><div class="line">    singleRun: <span class="literal">true</span>,</div><div class="line">    frameworks: [<span class="string">'mocha'</span>, <span class="string">'chai'</span>, <span class="string">'sinon'</span>, <span class="string">'sinon-chai'</span>],</div><div class="line">    files: [</div><div class="line">      <span class="string">'test.webpack.js'</span></div><div class="line">    ],</div><div class="line">    plugins: [</div><div class="line">      ......</div><div class="line">      <span class="string">'karma-coverage'</span></div><div class="line">    ],</div><div class="line">    preprocessors: &#123;</div><div class="line">      <span class="comment">//'app/**/*.js': ['coverage'],</span></div><div class="line">      <span class="string">'test.webpack.js'</span>: [<span class="string">'webpack'</span>, <span class="string">'sourcemap'</span>]</div><div class="line">    &#125;,</div><div class="line">    reporters: [<span class="string">'mocha'</span>, <span class="string">'coverage'</span>],</div><div class="line"></div><div class="line">    <span class="comment">// optionally, configure the reporter</span></div><div class="line">    coverageReporter: &#123;</div><div class="line">      type: <span class="string">'html'</span>,</div><div class="line">      dir: <span class="string">'coverage/'</span></div><div class="line">    &#125;,</div><div class="line">    webpack: webpackConfig,</div><div class="line">......</div><div class="line">  &#125;);</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>此处复用了webpack的配置文件<code>webpack.config.js</code>。当然也可以直接将webpack的配置文件写在<code>karma.config.js</code>中。</p>
<h3 id="修改test-webpack-js文件"><a href="#修改test-webpack-js文件" class="headerlink" title="修改test.webpack.js文件"></a>修改test.webpack.js文件</h3><p>在<code>test.webpack.js</code>文件中引入所要测试的源代码和测试用例文件，如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> context = <span class="built_in">require</span>.context(<span class="string">'./test'</span>, <span class="literal">true</span>, <span class="regexp">/spec\.js$/</span>);</div><div class="line">context.keys().forEach(context);</div><div class="line"></div><div class="line"><span class="keyword">var</span> context = <span class="built_in">require</span>.context(<span class="string">'./app'</span>, <span class="literal">true</span>, <span class="regexp">/\.jsx?$/</span>);</div><div class="line">context.keys().forEach(context);</div></pre></td></tr></table></figure></p>
<p>注意，这里如果没有添加<code>./app</code>，则没有写测试用例的文件（本例中的<code>FooBar.js</code>）就不会出现在coverage的report中。</p>
<h3 id="运行测试"><a href="#运行测试" class="headerlink" title="运行测试"></a>运行测试</h3><p>运行命令<code>npm run test</code> 运行karma测试，命令行中显示结果：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">&gt; react_boilerplate@1.0.0 <span class="built_in">test</span> /Users/i301792/Work/react_boilerplate</div><div class="line">&gt; karma start</div><div class="line"></div><div class="line"></div><div class="line">START:</div><div class="line">26 07 2016 14:28:20.866:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/</div><div class="line">26 07 2016 14:28:20.872:INFO [launcher]: Starting browser Chrome</div><div class="line">26 07 2016 14:28:21.896:INFO [Chrome 51.0.2704 (Mac OS X 10.11.6)]: Connected on socket /<span class="comment">#prlpeNiUX9kDUlWtAAAA with id 1527217</span></div><div class="line">  root</div><div class="line">    ✔ renders without problems</div><div class="line">  app</div><div class="line">    ✔ loads without problems</div><div class="line"></div><div class="line">Finished <span class="keyword">in</span> 0.045 secs / 0.024 secs</div><div class="line"></div><div class="line">SUMMARY:</div><div class="line">✔ 2 tests completed</div></pre></td></tr></table></figure></p>
<p>同时，在我们的项目目录下生成了一个新的文件夹：coverage：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">User:react_boilerplate i301792$ <span class="built_in">cd</span> coverage/</div><div class="line">User:coverage i301792$ tree</div><div class="line">.</div><div class="line">|____Chrome 51.0.2704 (Mac OS X 10.11.6)</div><div class="line">| |____app</div><div class="line">| | |____components</div><div class="line">| | | |____FooBar.js.html</div><div class="line">| | | |____HelloWorld.js.html</div><div class="line">| | | |____index.html</div><div class="line">| | |____index.html</div><div class="line">| | |____index.js.html</div><div class="line">| |____base.css</div><div class="line">| |____index.html</div><div class="line">| |____prettify.css</div><div class="line">| |____prettify.js</div><div class="line">| |____sort-arrow-sprite.png</div><div class="line">| |____sorter.js</div></pre></td></tr></table></figure>
<p>打开其中的html文件<code>index.html</code>，即可查看生成的测试覆盖率报告。</p>
<p><img src="http://7xsxyo.com1.z0.glb.clouddn.com/coverage1.png" alt="image1"></p>
<p><img src="http://7xsxyo.com1.z0.glb.clouddn.com/coverage2.png" alt="image2"></p>
<p>本文的所有代码可以在<a href="https://github.com/jiji262/react_boilerplate/tree/master/_tutorial_/react_boilerplate_v8" target="_blank" rel="external">react_boilerplate_v8</a>中查看。</p>
<h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><p><a href="http://krasimirtsonev.com/blog/article/a-modern-react-starter-pack-based-on-webpack" target="_blank" rel="external">http://krasimirtsonev.com/blog/article/a-modern-react-starter-pack-based-on-webpack</a></p>
<p><a href="http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/" target="_blank" rel="external">http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/</a></p>
<p><a href="https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack" target="_blank" rel="external">https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack</a></p>
<p><a href="https://medium.com/@gunnarlium/es6-code-coverage-with-babel-jspm-karma-jasmine-and-istanbul-2c1918c5bb23#.59hdlbd7w" target="_blank" rel="external">https://medium.com/@gunnarlium/es6-code-coverage-with-babel-jspm-karma-jasmine-and-istanbul-2c1918c5bb23#.59hdlbd7w</a></p>
<p><a href="https://github.com/zyml/es6-karma-jasmine-webpack-boilerplate" target="_blank" rel="external">https://github.com/zyml/es6-karma-jasmine-webpack-boilerplate</a></p>
<p><a href="https://github.com/isaacs/node-glob" target="_blank" rel="external">https://github.com/isaacs/node-glob</a></p>
<p><a href="https://github.com/deepsweet/babel-istanbul-loader" target="_blank" rel="external">https://github.com/deepsweet/babel-istanbul-loader</a></p>
<p><a href="https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.v8xtgvpdi" target="_blank" rel="external">https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.v8xtgvpdi</a></p>

      
    </div>

    <div>
      
        
<div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <img id="wechat_subscriber_qcode" src="/uploads/wechatmp.jpg" alt="令狐葱 wechat" style="width: 200px; max-width: 100%;"/>
    <div>欢迎您扫一扫上面的二维码，订阅我的微信公众号！</div>
</div>


      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div></div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="/uploads/wechatpay.png" alt="令狐葱 WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="/uploads/alipaypay.png" alt="令狐葱 Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端/" rel="tag"># 前端</a>
          
            <a href="/tags/webpack/" rel="tag"># webpack</a>
          
            <a href="/tags/react/" rel="tag"># react</a>
          
            <a href="/tags/karma/" rel="tag"># karma</a>
          
            <a href="/tags/coverage/" rel="tag"># coverage</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/04/29/create-your-own-react-boilerplate/" rel="next" title="手把手教你基于ES6架构自己的React Boilerplate项目">
                <i class="fa fa-chevron-left"></i> 手把手教你基于ES6架构自己的React Boilerplate项目
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/08/06/nodejs-batch-download-images-with-async-and-bagpipe/" rel="prev" title="Nodejs大批量下载图片入坑指南(使用async和bagpipe处理大并发量请求)">
                Nodejs大批量下载图片入坑指南(使用async和bagpipe处理大并发量请求) <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
  <a class="jiathis_button_tsina"></a>
  <a class="jiathis_button_tqq"></a>
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_cqq"></a>
  <a class="jiathis_button_douban"></a>
  <a class="jiathis_button_renren"></a>
  <a class="jiathis_button_qzone"></a>
  <a class="jiathis_button_kaixin001"></a>
  <a class="jiathis_button_copy"></a>
  <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
  var jiathis_config={
    hideMore:false
  }
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>

          
          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/"
           data-title="手把手教你为React Boilerplate添加测试代码覆盖率报告" data-url="http://jiji262.github.io/2016/07/26/react-testing-with-karma-and-webpack-and-coverage-report/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.gif"
               alt="令狐葱" />
          <p class="site-author-name" itemprop="name">令狐葱</p>
           
              <p class="site-description motion-element" itemprop="description">去留无意，闲看庭前花开花落；宠辱不惊，漫随天外云卷云舒。</p>
          
        </div>
        <nav class="site-state motion-element">
        
          
            <div class="site-state-item site-state-posts">
              <a href="/">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">28</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/jiji262" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/linghucong" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/jiji262" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#代码"><span class="nav-number">1.1.</span> <span class="nav-text">代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#准备工作"><span class="nav-number">2.</span> <span class="nav-text">准备工作</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#react-boilerplate代码"><span class="nav-number">2.1.</span> <span class="nav-text">react boilerplate代码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#build和test"><span class="nav-number">2.2.</span> <span class="nav-text">build和test</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#测试代码覆盖率"><span class="nav-number">3.</span> <span class="nav-text">测试代码覆盖率</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#安装插件"><span class="nav-number">3.1.</span> <span class="nav-text">安装插件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#修改karma配置文件"><span class="nav-number">3.2.</span> <span class="nav-text">修改karma配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#修改test-webpack-js文件"><span class="nav-number">3.3.</span> <span class="nav-text">修改test.webpack.js文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#运行测试"><span class="nav-number">3.4.</span> <span class="nav-text">运行测试</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参考链接"><span class="nav-number">4.</span> <span class="nav-text">参考链接</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">令狐葱</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  




  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"jiji262"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  













  
  

  

  

  

  


</body>
</html>
